<template>
	<view class="wrap">
		<view class="apply-info-wrapper">
			<view>
				<u-jk-avatar v-if="applyInfo.userInfo[0].avatar" :src="applyInfo.userInfo[0].avatar" size="80" mode="square" class="header-image"></u-jk-avatar>
				<u-jk-avatar v-else :text="applyInfo.empName" size="80" mode="square" class="header-image" bg-color='#36daeb'></u-jk-avatar>
			</view>
			<view style="width: 59%; margin-left: 20rpx;">
				<view class="item-title">
					<view>{{applyInfo.empName}}</view>
					<view style="margin-left: 20rpx;">时长：{{applyInfo.workDays}}天</view>
				</view>
				<view class="item-content">{{applyInfo.reason}}</view>
			</view>
			<view style="margin-left: auto;">
				<view class="item-title" style="font-size: 28rpx;">{{applyInfo.workTimeStart}}</view>
				<view style="text-align: center;">{{applyInfo.status | statusFilter}}</view>
			</view>
		</view>
		<view class="time-line-wrapper">
			<u-time-line>
				<u-time-line-item v-if="applyInfo.status !== '0'">
					<template v-slot:content>
						<view>
							<view class="u-order-desc">审核结束</view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item
					v-for="(item, index) in auditList"
					:key="index"
					nodeTop="2">
					<template v-slot:node>
						<!-- 流程状态 -->
						<view v-if="item.status === '0'">
							<u-icon name="checkmark-circle-fill" color="#19be6b" :size="53"></u-icon>
						</view>
						<view v-else-if="item.status === '1'">
							<u-icon name="close-circle-fill" color="#ff8d00" :size="53"></u-icon>
						</view>
						<view v-else class="u-node" style="background: #64aee4;">
							<u-icon name="pushpin-fill" color="#FFFFFF" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view class="u-order-header">
							<view class="u-order-title">{{item.auditorInfo[0].username}}</view>
							<view v-if="item.status === '0'" class="u-order-status u-order-status-0">
								已通过
							</view>
							<view v-else-if="item.status === '1'" class="u-order-status u-order-status-1">
								已拒绝
							</view>
							<view v-else class="u-order-status u-order-status-2">
								待审核
							</view>
						</view>
						<!-- 流程退回才显示回复内容，同意不用显示 -->
						<view v-if="item.status === '1'" class="u-order-desc">拒绝原因：{{item.reason}}</view>
						<view class="u-order-time">{{item.createTime}}</view>
					</template>
				</u-time-line-item>
				<u-time-line-item>
					<template v-slot:content>
						<view>
							<view class="u-order-desc">申请开始</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
		<view class="apply-footer">
			<u-button v-if="!ifAuditor && applyInfo.status == 0" @click="cancelApplication" style="margin: auto; width: 25%;" type="primary">撤回申请</u-button>
			<view style="display: flex;" v-else-if="ifAuditor && curAuditInfo.status === '2'">
				<u-button @click="agreeApply" class="audit-button" type="success">同意</u-button>
				<u-button @click="showRejectModal = true" class="audit-button" style="margin-right: auto;" type="error">不同意</u-button>
			</view>
		</view>
		<!-- 拒绝申请确认弹窗 -->
		<u-modal
			v-model="showRejectModal"
			ref="rejectModal"
			title="确认拒绝"
			width="700"
			show-cancel-button
			:async-close="true"
			@confirm="rejectApplyValid"
			@cancel="cancelReject">
			<view class="modal-body">
				<u-form :model="rejectEntity" :rules="rules" ref="rejectForm" :errorType="errorType">
					<u-form-item
						:rightIconStyle="{color: '#888', fontSize: '32rpx'}"
						label-position="left"
						label="拒绝理由:"
						prop="rejectReason"
						label-width="150"
						required>
						<u-input v-model="rejectEntity.rejectReason" type="textarea" placeholder="请输入拒绝理由" maxlength="50" auto-height border trim clearable></u-input>
					</u-form-item>
				</u-form>
				<!-- <u-input v-model="rejectReason" type="textarea" auto-height border clearable placeholder="请输入拒绝理由"></u-input> -->
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid: '',				// 当前用户id
				applyInfo: {},			// 申请信息
				auditList: [],			// 审核情况列表
				curAuditInfo: {},		// 当前审核者所负责的审核记录
				ifAuditor: false,		// 是否为审核者
				showRejectModal: false,	// 是否展示拒绝申请确认弹窗
				rejectEntity: {			// 拒绝相关数据
					rejectReason: ''	// 拒绝理由
				},
				rules: {				// 拒绝弹窗表单校验规则
					rejectReason: [{
						required: true,
						message: '请输入拒绝理由',
						trigger: ['change','blur']
					}]
				},
				errorType: ['message']
			}
		},
		filters: {
			// 审核状态转文字
			statusFilter(status) {
				switch(status) {
					case '0':
						return '待审核';
					case '1':
						return '已审核';
					case '2':
						return '已失效';
					default:
						return '待审核';
				}
			},
			// 审核记录状态转文字
			auditStatusFilter(status) {
				switch(status) {
					case '0':
						return '已通过';
					case '1':
						return '已拒绝';
					case '2':
						return '待审核';
					default:
						return '待审核';
				}
			}
		},
		onLoad(options) {
			this.uid = uni.getStorageSync('uid');
			this.ifAuditor = options.ifAuditor === 'true' ? true : false;
			this.applyInfo = JSON.parse(options.applyInfo);
			this.getApplyDetail(this.applyInfo._id);
			this.$refs.rejectForm.setRules(this.rules);
		},
		methods: {
			/**
			 * 获取申请详情
			 * @param {String} workId 申请id
			 */
			getApplyDetail(workId) {
				let that = this;
				
				uni.showLoading({})
				this.request('business/work/getApplyDetail', {
					workId: workId
				}).then(res => {
					if(res.code === 0) {
						that.auditList = res.data;
						that.auditList.forEach(item => {
							if(item.auditorInfo[0]._id === that.uid) {
								that.curAuditInfo = item;
							}
						})
					} else {
						uni.showModal({
							showCancel: false,
							content: res.msg
						})
					}
				}).catch(err => {
					uni.showModal({
						showCancel: false,
						content: err.message || '请求服务失败'
					})
				}).finally(() => {
					uni.hideLoading();
				})
			},
			
			/**
			 * 同意申请
			 */
			agreeApply() {
				let that = this;
				
				uni.showModal({
					title: '确认同意',
					content: '是否确认同意此申请？',
					success() {
						that.request('business/work/updateApplyAuditStatus', {
							_id: that.curAuditInfo._id,
							workId: that.applyInfo._id,
							status: '0'
						}).then(res => {
							if(res.code === 0) {
								uni.showModal({
									content: res.msg,
									showCancel: false,
									success() {
										uni.navigateBack({})
									}
								})
							} else {
								uni.showModal({
									showCancel: false,
									content: res.msg
								})
							}
						}).catch(err => {
							uni.showModal({
								showCancel: false,
								content: err.message || '请求服务失败'
							})
						})
					}
				})
			},
			
			/**
			 * 拒绝申请前验证
			 */
			rejectApplyValid() {
				let that = this;
				
				this.$refs.rejectForm.validate(valid => {
					if (valid) {
						that.rejectApply();
					} else {
						that.$refs.rejectModal.clearLoading();
					}
				});
			},
			
			/**
			 * 拒绝申请前验证
			 */
			rejectApply() {
				let that = this;
				
				this.request('business/work/updateApplyAuditStatus', {
					_id: that.curAuditInfo._id,
					workId: that.applyInfo._id,
					reason: that.rejectEntity.rejectReason,
					status: '1'
				}).then(res => {
					that.showRejectModal = false;
					if(res.code === 0) {
						uni.showModal({
							content: res.msg,
							showCancel: false,
							success() {
								uni.navigateBack({})
							}
						})
					} else {
						uni.showModal({
							showCancel: false,
							content: res.msg
						})
					}
				}).catch(err => {
					that.showRejectModal = false;
					uni.showModal({
						showCancel: false,
						content: err.message || '请求服务失败'
					})
				}).finally(() => {
					that.rejectEntity.rejectReason = '';
				})
			},
			
			/**
			 * 撤回申请
			 */
			cancelApplication() {
				let that = this;
				
				uni.showModal({
					title: '撤回确认',
					content: '是否确认撤回本次申请？',
					success() {
						that.request('business/work/updateUpdateStatus', {
							workId: that.applyInfo._id,
							status: '2'
						}).then(res => {
							if(res.code === 0) {
								uni.showModal({
									content: res.msg,
									showCancel: false,
									success() {
										uni.navigateBack({})
									}
								})
							} else {
								uni.showModal({
									showCancel: false,
									content: res.msg
								})
							}
						}).catch(err => {
							uni.showModal({
								showCancel: false,
								content: err.message || '请求服务失败'
							})
						})
					}
				})
			},
			
			/**
			 * 取消拒绝操作
			 */
			cancelReject() {
				this.rejectEntity = {
					rejectReason: ''
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 24rpx 24rpx 24rpx 40rpx;
	}
	
	.apply-info-wrapper {
		display: flex;
		margin-top: 24rpx;
		padding: 24rpx 20rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		box-shadow: 10rpx 10rpx 20rpx #888888;
	}
	
	.header-image {
		width: 80rpx;
		height: 80rpx;
		overflow: hidden;
	}
	
	.item-title {
		display: flex;
		font-size: 30rpx;
		color: #757070;
		line-height: 1.5;
	}
	
	.item-content {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.time-line-wrapper {
		margin-top: 90rpx;
		margin-bottom: 130rpx;
	}
	
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-header {
		display: flex;
		align-items: center;
	}
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-title.unacive {
		color: rgb(150, 150, 150);
	}
	
	.u-order-status {
		margin-left: 24rpx;
	}
	
	.u-order-status-0 {
		background: #19be6b;
		color: #FFFFFF;
		border-radius: 7rpx;
		padding: 3rpx 12rpx;
	}
	
	.u-order-status-1 {
		background: #ff8d00;
		color: #FFFFFF;
		border-radius: 7rpx;
		padding: 3rpx 12rpx;
	}
	
	.u-order-status-2 {
		background: #64aee4;
		color: #FFFFFF;
		border-radius: 7rpx;
		padding: 3rpx 12rpx;
	}
	
	.u-order-desc {
		margin-top: 6rpx;
		color: rgb(150, 150, 150);
		font-size: 28rpx;
	}
	
	.u-order-time {
		margin-top: 6rpx;
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
	
	.tel {
		color: $u-type-primary;
	}
	
	.apply-footer {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 22rpx;
	}
	
	.audit-button {
		width: 25%;
		margin-left: auto;
	}
	
	.modal-body {
		padding: 32rpx 46rpx;
	}
</style>
